'use client';

import { useState } from 'react';
import {
  AppBar,
  Toolbar,
  Typography,
  Box,
  IconButton,
  Badge,
  Avatar,
  useTheme
} from '@mui/material';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import NotificationsIcon from '@mui/icons-material/Notifications';
import { useTranslation } from 'react-i18next';

export default function Navbar({ projects = [] }) {
  const theme = useTheme();
  const [selectedProject, setSelectedProject] = useState('');
  const { i18n, t } = useTranslation();

  return (
    <AppBar
      position="static"
      elevation={0}
      sx={{
        bgcolor: '#000000', // 严格按照图片中的纯黑色背景
        borderBottom: 'none',
        borderRadius: 0 // 确保没有圆角
      }}
    >
      <Toolbar sx={{ px: 3, borderRadius: 0 }}>
        {/* 左侧 - DataOps 品牌 */}
        <Typography
          variant="h6"
          sx={{
            color: 'white',
            fontWeight: 600,
            fontSize: '1.5rem',
            flexGrow: 0
          }}
        >
          DataOps
        </Typography>

        {/* 右侧 - 用户信息区域 */}
        <Box sx={{ flexGrow: 1 }} />
        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
          {/* 帮助图标 */}
          <IconButton
            sx={{
              color: 'white',
              p: 1,
              borderRadius: 0 // 移除圆角
            }}
          >
            <HelpOutlineIcon />
          </IconButton>

          {/* 通知图标 - 带11个通知 */}
          <IconButton
            sx={{
              color: 'white',
              p: 1,
              borderRadius: 0 // 移除圆角
            }}
          >
            <Badge badgeContent={11} color="error">
              <NotificationsIcon />
            </Badge>
          </IconButton>

          {/* 用户头像 */}
          <Avatar
            sx={{
              width: 32,
              height: 32,
              ml: 1
            }}
            src="/iocns/default_user.png"
            alt="用户头像"
          />

          {/* 用户名 */}
          <Typography
            variant="body2"
            sx={{
              color: 'white',
              ml: 1,
              mr: 1
            }}
          >
            Serati Ma
          </Typography>

          {/* 中英文切换图标 */}
          <IconButton
            sx={{
              color: 'white',
              p: 1,
              borderRadius: 0 // 移除圆角
            }}
            onClick={() => {
              const newLang = i18n.language === 'zh-CN' ? 'en' : 'zh-CN';
              i18n.changeLanguage(newLang);
            }}
          >
            <img 
              src="/iocns/chinese_to_english.png" 
              alt="中英文切换"
              style={{
                width: '20px',
                height: '20px',
                filter: 'brightness(0) invert(1)' // 将图标变为白色
              }}
            />
          </IconButton>
        </Box>
      </Toolbar>
    </AppBar>
  );
}
